<template>
    <div id="jh_table">
        <el-table
            :data="tableData"
            :stripe="stripe"
            :border="border"
            style="width: 100%"
            size="small"
            @selection-change="handleSelectionChange"
            @cell-click="godetail"
        >
            <el-table-column type="selection" width="50" v-if="tablecheckbox"></el-table-column>
            <el-table-column label="选择" fixed width="50" v-if="tableradio">
                <template slot-scope="scope">
                    <el-radio
                        :label="scope.$index"
                        :value="templateRadio"
                        @change.native="getTemplateRow(scope.$index,scope.row)"
                    >&nbsp</el-radio>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="50" v-if="typeindex"></el-table-column>

            <el-table-column
                v-for="(item,thindex) in tableTh"
                :key="thindex"
                :prop="item.prop"
                :label="item.label"
                :align="align"
                :width="item.width"
            >
                <el-table-column
                    v-if="item.childtable"
                    v-for="child,childindex in item.childtable"
                    :key="'_'+childindex"
                    :prop="child.prop"
                    :label="child.label"
                    :align="align"
                    :width="child.width"
                >
                    <template slot-scope="scope">{{scope.row[item.prop][child.prop]}}</template>
                </el-table-column>
                <template slot-scope="scope">
                    <div v-if="item.type == 'caozuo'">
                        <el-button @click="edit('editnotice',scope.row)" type="text" size="small">修改</el-button>
                    </div>
                    <div v-else-if="item.type == 'gathercaozuo'">
                        <el-button @click="editknowledge(scope.row)" type="text" size="small">修改</el-button>
                    </div>
                    <div
                        v-else-if="item.prop == 'knowledgeExamineStatus' || item.prop == 'knowledgeStatus'"
                    >
                        <span v-if="scope.row[item.prop] == '0'">制定中</span>
                        <span v-if="scope.row[item.prop] == '1'">待审批</span>
                        <span v-if="scope.row[item.prop] == '2'">已发布</span>
                        <span v-if="scope.row[item.prop] == '3'">已驳回</span>
                    </div>
                    <div
                        v-else-if="item.label == '发布人'"
                    >{{scope.row[item.prop].nickName || scope.row[item.prop].realName || scope.row[item.prop].userName}}</div>
                    <div v-else-if="item.label == '所属部门'">{{scope.row[item.prop].region.regionName}}</div>
                    <div
                        v-else-if="item.prop == 'createUser'"
                    >{{scope.row[item.prop] == null ? '':(scope.row[item.prop].nickName || scope.row[item.prop].realName || scope.row[item.prop].userName)}}</div>
                    <div
                        v-else-if="item.prop == 'userName'"
                    >{{scope.row.nickName || scope.row.realName || scope.row.userName}}</div>
                    <div
                        v-else-if="item.prop == 'knowledgeCategory'"
                    >{{scope.row[item.prop] == null ? '':scope.row[item.prop].categoryName}}</div>
                    <div v-else>{{scope.row[item.prop]}}</div>
                </template>
            </el-table-column>
        </el-table>
        <div class="wo-btn-bottom">
            <el-pagination
                class="pagestyle"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                background
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :layout="layout"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        tableData: "",
        tableTh: "",
        // 条纹
        stripe: {
            type: Boolean,
            default: false
        },
        // 边框
        border: {
            type: Boolean,
            default: false
        },
        // 多选
        tablecheckbox: {
            type: Boolean,
            default: false
        },
        // 单选
        tableradio: {
            type: Boolean,
            default: false
        },
        // 序号
        typeindex: {
            type: Boolean,
            default: false
        },
        // 文字
        align: {
            type: String,
            default: "center"
        },
        currentPage: "", //当前页
        pageSize: "", //页大小
        pageSizes: "", //可选页
        total: "", //数据总数
        // 分页样式
        layout: {
            type: String,
            default: "prev, pager, next, total, jumper, sizes"
        },
        templateRadio: ""
    },
    data() {
        return {};
    },
    methods: {
        handleSelectionChange(val) {
            this.$emit("handleSelectionChange", val);
        },
        godetail(row, column, cell, event) {
            if (
                column.type == "selection" ||
                column.fixed ||
                column.label == "操作"
            ) {
                // 点到这几列不反应
            } else {
                this.$emit("godetail", row, column, cell, event);
            }
        },
        edit(type, val) {
            this.$emit("edit", type, val);
        },
        handleSizeChange(val) {
            this.$emit("handleSizeChange", val);
        },
        handleCurrentChange(val) {
            this.$emit("handleCurrentChange", val);
        },
        getTemplateRow(index, row) {
            this.$emit("getTemplateRow", index, row);
        },
        editknowledge(row) {
            this.$emit("editknowledge", row);
        }
    }
};
</script>

<style scoped>
#jh_table {
    width: 100%;
}
#jh_table .wo-btn-bottom {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* 
  使用
  <my-table :tableData="tableData" :tableTh="tableTh" :tableradio="true" :templateRadio="''" :currentPage="1" :pageSize="15" :pageSizes="[15,20,40,80]" :total="474" @getTemplateRow="getTemplateRow" @handleSelectionChange="handleSelectionChange" @godetail="godetail"></my-table>
  import myTable from '@/components/myTable';
  components:{
    myTable
  },
  handleSelectionChange(val) {
    
  },
  getTemplateRow(index,row){
    
  },
  godetail(row, column, cell, event) {
    console.log(column)
  },
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  },
 */
</style>
